<template>
    <!-- latest Failed detail -->
    <div v-if="latestFR" class="failReasonsBox">
        <div class="frHeaderBox">
            <span>不合格原因</span>
        </div>
        <div class="frContentBox">
            <p> {{ latestFR }} </p>
        </div>
    </div>

    <div class="woRecordCon">
        <div class="row titleBox">
            <span class=""> 工單 {{ rpOrderNo }} </span>
        </div>
        <div class="row recordBox" v-for="(record, index) in records" :key="index">
            <div class="recordItem" v-if="record.action!=='restart'"> 
                <span>[{{ record.role }}] {{ record.cnName }}已在 {{ record.dateTime }} {{ record.action }}了工单 {{ record.isFailed !== null ? record.isFailed ? '[不合格]' : '[合格]' : ''  }}</span> <br />
                <div v-if="record.isFailed">
                    不合格原因: 
                    <div class="failReason" v-for="(fr, index) in record.failDetails" :key="index">
                        {{ fr.failed_reason }} ({{ fr.fail_qty }} {{ fr.failed_unit }})
                    </div>  
                </div>
                <div v-if="record.remark">
                    备注: {{ record.remark }}
                </div>
                <!-- {{ record.action }} -->
            </div>
            <q-separator />
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { useMassScanStore } from 'src/stores/modules/massScanStore'

const useMassScan = useMassScanStore()

const props = defineProps({
  rpOrderNo: String
})
console.log('props: ', props)

const woInfo = useMassScan.getWorkOrder(props.rpOrderNo)
const latestFR = ref(woInfo.latest_failReasons)
const latestRM = ref(woInfo.latest_remark)
const records = ref(woInfo.records.sort((a,b)=>{
  const dateA = new Date(a.dateTime.replace(/\./g, "/"));
  const dateB = new Date(b.dateTime.replace(/\./g, "/"));
  return dateB - dateA;
}))
console.log('woInfo: ', woInfo)

</script>

<style lang="scss" scoped>


.failReason{
    background-color: red;
}

.failReasonsBox{
    margin-top: 10px;
    border-radius: 5px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.3rem;
    @media (max-width:480px){
        font-size: 1rem;
    }
    .frHeaderBox{
        color: white;
        padding: 5px;
        text-align: center;
        background-color: #FB4A4A;
        border-radius: 5px 5px 0px 0px;
    }
    .frContentBox{
        color: black;
        padding: 5px;
        background-color: #FFBABA;
        border-radius: 0px 0px 5px 5px;
    }
}
.woRecordCon{
    margin-top: 10px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;

    .titleBox{
        background-color: #3A356A;
        color: white;
        padding: 10px 10px 10px 10px;
    }

    .recordBox{
        background-color: rgba(255, 255, 255, 0.726);
        padding-bottom: 5px;
        font-size: 1rem;
        @media (max-width:480px){
            font-size: 0.9rem;
        }
        .recordItem{
            width: 100%;
            padding: 10px 10px 10px 10px;
            background-color: white;
            color: black;
        }
    }

}
</style>
